﻿@page "/datagrid/paging"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-datagrid/paging'>Blazor Grid paging</a> feature. </p> 
</SampleDescription>
<ActionDescription>
   <p>Paging allows you to display the contents of the DataGrid in page segments. By default, paging is disabled. To enable paging, set the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging'>AllowPaging</a></code> property to true.</p>
   <p>The <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes'>PageSizes</a></code> property of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridPageSettings.html'>GridPageSettings</a></code> component enables a dropdown in pager which allows you to change the number of records displayed in the page dynamically.</p>
   <p>DataGrid is rendered with paging enabled and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridPageSettings~PageSizes.html'>PageSizes</a></code> set as true and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount'>PageCount</a></code> set to 5.</p>
   <p>In this demo, You can refer to our <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-datagrid/paging'>Blazor Grid Paging</a> and <a target='_blank' class='code' href='https://blazor.syncfusion.com/documentation/datagrid/virtual/'>Blazor Virtualizing Grid</a> page to know more about paging and virtualization and its feature representations.</p>
</ActionDescription>


<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowPaging="true">
                <GridPageSettings PageCount="5" PageSizes="true"></GridPageSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right"  Width="130"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right"  Width="120"></GridColumn>                   
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
